<template>
    <div class="info-container">
        <div class="header-area">
            <el-button @click="handleBack" class="back-btn">
                <el-icon><ArrowLeft /></el-icon>
                返回
            </el-button>
        </div>

        <div class="info-card">
            <div class="info-header">个人信息</div>
            
            <div class="info-content">
                <!-- 头像上传 -->
                <div class="info-item avatar-item">
                    <span class="label">头像</span>
                    <div class="avatar-uploader">
                        <el-avatar 
                            :size="100" 
                            :icon="UserFilled"
                            :src="adminInfo.administrator_head"
                            class="avatar-img"
                            @click="triggerFileInput"
                        />
                        <input 
                            type="file" 
                            ref="fileInput" 
                            style="display: none" 
                            accept="image/jpeg,image/png"
                            @change="handleFileChange"
                        />
                        <div class="avatar-hover-text">点击更换头像</div>
                    </div>
                </div>

                <!-- 其他信息项 -->
                <div class="info-items-container">
                    <div class="info-item">
                        <span class="label">账号</span>
                        <span class="value">{{ adminInfo.administrator_account }}</span>
                    </div>

                    <div class="info-item">
                        <span class="label">姓名</span>
                        <span class="value">{{ adminInfo.administrator_name }}</span>
                    </div>

                    <div class="info-item">
                        <span class="label">ID</span>
                        <span class="value">{{ adminInfo.administrator_id }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { UserFilled, ArrowLeft } from '@element-plus/icons-vue';
import { me } from '@/api/manager';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

const adminInfo = ref({
    administrator_account: '',
    administrator_head: null,
    administrator_id: '',
    administrator_name: ''
});

const getAdminInfo = async () => {
    try {
        const res = await me();
        if (res.data.code === '2000') {
            adminInfo.value = res.data.data;
            // 保存管理员信息到 localStorage
            localStorage.setItem('adminInfo', JSON.stringify(res.data.data));
        } else {
            ElMessage.error(res.data.message || '获取信息失败');
        }
    } catch (error) {
        console.error('Error fetching admin info:', error);
        ElMessage.error('获取信息失败');
    }
};

const handleBack = () => {
    router.back();
};

onMounted(() => {
    getAdminInfo();
});
</script>

<style scoped>
.info-container {
    padding: 40px;
    height: 100%;
    background-color: #f5f7fa;
    min-height: calc(100vh - 80px);
}

.info-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    max-width: 700px;
    margin: 20px auto;
}

.info-header {
    font-size: 24px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
    text-align: center;
}

.info-content {
    padding: 0;
    max-width: 600px;
    margin: 0 auto;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    font-size: 16px;
    padding: 0;
}

.avatar-item {
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    position: relative;
}

.label {
    width: 60px;
    color: #606266;
    font-weight: 500;
    text-align: left;
    margin-right: 20px;
    margin-left: 50px;
}

.value {
    color: #303133;
    flex: 1;
    font-size: 16px;
    text-align: left;
}

.avatar-uploader {
    margin-left: 20px;
}

.avatar-img {
    width: 80px !important;
    height: 80px !important;
    border: 2px solid #e4e7ed;
    transition: all 0.3s;
}

.avatar-img:hover {
    border-color: #409EFF;
    transform: scale(1.02);
}

.avatar-hover-text {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
}

.avatar-uploader:hover .avatar-hover-text {
    display: block;
}

.header-area {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #606266;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.3s;
}

.back-btn:hover {
    color: #409EFF;
    background-color: #ecf5ff;
}

.info-items-container {
    margin-top: 40px;
    background-color: #f8f9fa;
    padding: 24px;
    border-radius: 8px;
}

.info-items-container .info-item {
    margin-bottom: 20px;
}

.info-items-container .info-item:last-child {
    margin-bottom: 0;
}

.info-items-container .info-item .label {
    margin-left: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .info-container {
        padding: 20px;
    }
    
    .info-card {
        padding: 20px;
    }
    
    .info-content {
        padding: 0 20px;
    }
}
</style>